<template>
  <div class="container">
  <Header/>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="我的帖子">
        <ul>
          <li v-for="item in pageinfoEvent.list" :key="item.id">
            {{item.id}}
            <router-link :to="{ name: 'detail', params: { eventId: item.id }}">{{item.title}}</router-link>
            <span v-if="item.approvalStatus=='Pending'">(审核中)</span>
            <span v-if="item.approvalStatus=='Rejected'">(被拒绝)</span>
            {{item.createTime}}
          </li>
        </ul>
        <div class="pagination">
          <a href="javascript:void(0)" @click="changePage(1)">首页</a>
          <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum-1)">&laquo; 上一页</a>
          <a href="javascript:void(0)"
             :class="{paginationok:pageNum==eventQuery.pageNum}"
             v-for="pageNum in pageinfoEvent.navigatepageNums"
             @click="changePage(pageNum)">
            {{pageNum}}
          </a>
          <a href="javascript:void(0)" @click="changePage(eventQuery.pageNum+1)">下一页 &raquo;</a>
          <a href="javascript:void(0)" @click="changePage(pageinfoEvent.pages)">末页</a>
          <span>第 {{ eventQuery.pageNum }} 页，共 {{ pageinfoEvent.pages }} 页</span>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="我的评论">
        <ul>
          <li v-for="item in pageinfoComment.list" :key="item.id">
            {{item.id}}
            <router-link :to="{ name: 'detail', params: { eventId: item.eventId},query:{commentId:item.id}}">{{item.content}}</router-link>
            {{item.createTime}}
            <router-link :to="{ name: 'detail', params: { eventId: item.eventId }}">《{{item.event.title}}》</router-link>
          </li>
        </ul>
        <div class="pagination">
          <a href="javascript:void(0)" @click="changePage2(1)">首页</a>
          <a href="javascript:void(0)" @click="changePage2(commentQuery.pageNum-1)">&laquo; 上一页</a>
          <a href="javascript:void(0)"
             :class="{paginationok:pageNum==commentQuery.pageNum}"
             v-for="pageNum in pageinfoComment.navigatepageNums"
             @click="changePage2(pageNum)">
            {{pageNum}}
          </a>
          <a href="javascript:void(0)" @click="changePage2(commentQuery.pageNum+1)">下一页 &raquo;</a>
          <a href="javascript:void(0)" @click="changePage2(pageinfoComment.pages)">末页</a>
          <span>第 {{ commentQuery.pageNum }} 页，共 {{ pageinfoComment.pages }} 页</span>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="其他">Content of Tab Pane 3</a-tab-pane>
      <a-tab-pane key="4" tab="通知">
        <Notification />
      </a-tab-pane>
      <a-tab-pane v-if="loginUser.isAdmin" key="9" tab="管理事件帖子">
        <AdminHome/>
      </a-tab-pane>
      <a-tab-pane v-if="loginUser.isAdmin" key="10" tab="管理用户">
        <AdminUsers/>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import Header from '../components/Header.vue'
import AdminHome from "./admin/AdminHome.vue";
import AdminUsers from "./admin/AdminUsers.vue";
import Notification from "./Notification.vue";
import axios from "axios";
export default {
  name: "Home",
  components:{
    Header,
    AdminHome,
    AdminUsers,
    Notification
  },
  data(){
    return {
      activeKey: "1",
      pageinfoEvent:{},
      pageinfoComment:{},
      eventQuery:{
        pageNum:1,
        pageSize:5,
        userId:0,
        approvalStatus:'all',
        sort:'',
        order:'',
      },
      commentQuery:{
        pageNum:1,
        pageSize:5,
        userId:0,
      },
    }
  },
  computed: {
    loginUser() {
      return this.$store.state.user;
    }
  },
  created(){
    this.loadEventList()
    this.loadCommentList()

    if(this.$route.query.tab){
      this.activeKey = this.$route.query.tab;
    }

  },
  methods:{
    loadEventList(){
      this.eventQuery.userId = this.loginUser.id
      axios.get(`/event/list`,{
        params:{
          ...this.eventQuery
        }
      }).then(res => {
        this.pageinfoEvent = res.data.data
      })
    },
    changePage(page){
      if(page>=1 && page<=this.pageinfoEvent.pages) {
        this.eventQuery.pageNum = page
        this.loadEventList()
      }
    },

    loadCommentList(){
      this.commentQuery.userId = this.loginUser.id
      axios.get(`/comment/list`,{
        params:{
          ...this.commentQuery
        }
      }).then(res => {
        this.pageinfoComment = res.data.data
      })
    },
    changePage2(page){
      if(page>=1 && page<=this.pageinfoComment.pages) {
        this.commentQuery.pageNum = page
        this.loadCommentList()
      }
    },
  }
}
</script>

<style scoped>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f3f3f3;
}
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination a {
  margin: 0 5px;
  text-decoration: none;
  color: hotpink;
}
.pagination span {
  margin: 0 5px;
}

/* 被点击时的样式 */
.paginationok {
  color: #ff0000 !important; /* 设置点击后的链接文字颜色 */
  text-decoration: underline !important; /* 添加下划线 */
}
</style>